<template>
    <ProTable
        ref="proTableRef"
        :data="table.data"
        :loading="table.isRefresh"
        controllerUrl="api"
        :defaultExpandAll="table.defaultExpandAll"
        :stripe="false"
        :columns="columns"
        :headerActionTypes="['sync', 'expandAll', 'search', 'dynamicQuery']"
        :columnActionTypes="['edit']"
        :queryFormItems="queryFormItems"
        :dynamicQuery="table.dynamicQuery"
        @onTableAction="onTableAction"
    >
        <template #form>
            <ApiForm ref="formRef" @onTableAction="onTableAction"></ApiForm>
        </template>
    </ProTable>
</template>

<script setup lang="tsx">
import { ApiType } from '@/api/system/api/types'
import { QueryFormItem } from '@/types/queryform'

const { table, formRef, proTableRef, onTableAction } = useTable({ api: new ProTableApi('api'), sort: 'sort', isPage: false })

const columns = reactive<Array<TableColumnType<ApiType>>>([
    {
        type: 'selection',
        align: 'center',
    },
    {
        prop: 'name',
        label: '名称',
        showOverflowTooltip: true,
    },
    {
        prop: 'label',
        label: '标签',
        showOverflowTooltip: true,
    },
    {
        prop: 'path',
        label: '地址',
        showOverflowTooltip: true,
    },
    {
        label: '方法',
        align: 'center',
        width: '100',
        component: (scope: any) => {
            const color = getHttpMethodTagColor(scope.row.httpMethod)
            return (
                color && (
                    <el-tag class="tag-httpMethod" color={color}>
                        {scope.row.httpMethod}
                    </el-tag>
                )
            )
        },
    },
    {
        prop: 'description',
        label: '描述',
        showOverflowTooltip: true,
    },
    {
        default: 'success',
        prop: 'sort',
        label: '排序',
        align: 'center',
        width: '65',
    },
    {
        prop: 'isEnabled',
        label: '状态',
        component: (scope: any) => {
            return <el-tag type={scope.row.isEnabled ? 'success' : 'error'}>{scope.row.isEnabled ? '是' : '否'}</el-tag>
        },
    },
    {
        type: 'datetime',
        prop: 'createDateTime',
        default: 'YYYY-MM-DD HH:mm:ss',
        label: '创建时间',
        align: 'center',
        width: '200',
    },
])
const queryFormItems = reactive<Array<QueryFormItem<ApiType>>>([
    {
        type: 'number',
        label: 'ID',
        name: 'id',
        placeholder: '角色ID',
    },
    {
        label: '名称',
        name: 'name',
        placeholder: '模糊查询',
    },
    {
        label: '标签',
        name: 'label',
        placeholder: '模糊查询',
    },
    {
        label: '请求地址',
        name: 'path',
        placeholder: '模糊查询',
    },
    {
        type: 'select',
        label: '请求方法',
        name: 'httpMethod',
        options: (): SelectOptions[] => {
            const options: SelectOptions[] = [
                { label: 'GET', value: 'GET' },
                { label: 'POST', value: 'POST' },
                { label: 'PUT', value: 'PUT' },
                { label: 'DELETE', value: 'DELETE' },
                { label: 'PATCH', value: 'PATCH' },
                { label: 'OPTIONS', value: 'OPTIONS' },
                { label: 'HEAD', value: 'HEAD' },
            ]

            return options
        },
    },
    {
        type: 'boole',
        label: '是否启用',
        name: 'isEnabled',
    },
    {
        type: 'select',
        label: '排序字段',
        sort: 'Sort',
        options: (): SelectOptions[] => {
            const options: SelectOptions[] = []
            columns.forEach((item) => {
                if (item.prop && item.label) {
                    options.push({ label: item.label, value: item.prop })
                }
            })
            return options
        },
    },
    {
        type: 'boole',
        label: '顺序',
        sort: 'Order',
        options: (): SelectOptions[] => [
            { label: '顺序', value: true },
            { label: '倒序', value: false },
        ],
    },
    {
        type: 'datetime',
        label: '创建时间',
        name: 'createDateTime',
        dateType: 'datetimerange',
    },
    {
        type: 'datetime',
        label: '更新时间',
        name: 'lastUpdateDateTime',
        dateType: 'datetimerange',
    },
])
</script>

<style lang="scss" scoped></style>
